@require '~styles/variables'
@require '~styles-lib/mixins'

.game-thumbnail-img
	rounded-corners-lg()
	change-bg('bg-offset')
	position: relative
	height: 0
	padding-top: 56.25% // HD 16:9
	overflow: hidden

.-inner
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%

.-icon
	theme-prop('color', 'bg-subtle')
	position: absolute
	font-size: 16px * 2
	left: 50%
	margin-left: -(@font-size / 2)
	top: @left
	margin-top: @margin-left

.-media
	opacity: 0
	transition: opacity 500ms

	.-loaded &
		opacity: 1

.-img, .-video
	rounded-corners-lg()
	position: absolute !important
	top: 0
	left: 0
	display: block
	width: 100%
	height: 100%

.-img
	z-index: 1

.-video
	z-index: 2
